<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/spring.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld"%>
<c:set var="BasePath" value="${pageContext.request.contextPath}"></c:set>
<c:set var="Plugins" value="${pageContext.request.contextPath}/res/plugins"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>供应链权限管理</title>
<link href="${BasePath}/res/css/common/liger-hack.css" rel="stylesheet" type="text/css" />
<link href="${Plugins}/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<script src="${Plugins}/jquery/jquery-1.3.2.min.js"	type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/core/base.js" type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<link href="${BasePath}/res/css/common/base.css" rel="stylesheet" type="text/css" />
<script src="${Plugins}/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/common/jquery.validate.method.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
<script src="${Plugins}/jquery-validation/messages_cn.js" type="text/javascript"></script>
<script src="${BasePath}/res/js/common/jquery.form.js" type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
<script src="${Plugins}/ligerUI/js/plugins/ligerTip.js" type="text/javascript"></script>
<script type="text/javascript" src="${BasePath}/res/js/access/access.js"></script>
<style type="text/css">
#searchbar{
	margin-bottom: 10px;
}
.navbar {
		height: 20px;
		border-bottom: #E6E6E6 solid 1px;
		line-height: 20px;
	}
.s-button {
	width:50px; margin-left:10px; padding-bottom:2px;
}
.yt-form-btn-back {
width: 72px;
height: 24px;
line-height: 24px;
margin-left: 5px;
background: url(../../../res/images/access/reset-btn.gif) no-repeat;
color: #6A6A6A;
border: 0px;
letter-spacing: 3px;
font-weight: bold;
cursor: pointer;
}
.l-table-edit {}
.l-table-edit-td{ padding:4px;}
.l-button-submit,.l-button-cancel{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
.l-verify-tip{ left:230px; top:120px;}
#leftsider { float:left; width:100%; height:100%;}
#rightsider { float:right; width:70%; height:100%;}
</style>
<script type="text/javascript">
    var manager = null;

    $(".l-tree .l-body span").live('mouseover', function (e) {
        if (!this.title) 
            this.title = $(this).text();
    });

    $(function ()
    {
    	var time = new Date().getTime();
        $("#tree1").ligerTree(
        {
            url: 'ajaxLoadAccessTree.do?sessionId=' + time,  
            nodeWidth : 200,
            checkbox: false,
            onBeforeExpand: onBeforeExpand,
            onExpand: onExpand,
            onSelect: onSelect
        });
        manager = $("#tree1").ligerGetTreeManager();
    });
    $(".l-tree").removeAttr("style");
    function onBeforeExpand(note)
    {
    	var time = new Date().getTime();
        if (note.data.children && note.data.children.length == 0)
        {
        	var id = note.data.id;
           manager.loadData(note.target,'ajaxLoadAccessTree.do?sessionId=' + time + '&id=' + id);
        }
    }
    function onExpand(note) {
    }
 	function onSelect(note) {
 		$('#id').val(note.data.id);
 		$('#menuName').val(note.data.menuName);
 		$('#menuUrl').val(typeof(note.data.menuUrl) == 'undefined' ? '' : note.data.menuUrl);
 		$('#menuSort').val(note.data.menuSort);
 		$('#parentMenuType').val(note.data.menuType);
 		$('#remark').val(note.data.remark);
 		if (typeof(note.data.children) == 'undefined') {
 			$('#hasChildren').val('false');
 		} else {
 			$('#hasChildren').val('true');
 		}
 	}
    </script>
</head>
<body style="padding:10px"> 
	<div id="">
		<div class="navbar"><span>您当前的位置： 系统管理 &gt; 供应链权限管理</span></div>
		<br/>
	</div>
    <div id="leftsider" style="width:200px; height:500px; margin:10px; float:left; border:1px solid #ccc; overflow:auto;  ">
    <ul id="tree1">
    	<%-- <c:forEach items="${accessVos }" var="accessVo">
    		<li isexpand="false"><span>${accessVos.menuName }</span><ul></ul></li>
    	</c:forEach> 
        <li isexpand="false"><span>第一个节点</span><ul></ul></li>
        <li isexpand="false"><span>第二个节点</span><ul></ul></li> --%>
    </ul> 
    </div>
    <div id="rightsider"><br><br><br><br><br>
    	<form action="addOrModifyMenu.do" id="resourceMgtForm" name="resourceMgtForm" method="post">
			<table>
				<tr height="50px;">
					<td align="right">
						<input type="hidden" name="id" id="id"/>
						<input type="hidden" name="parentId" id="parentId"/>
						<input type="hidden" name="hasChildren" id="hasChildren"/>
						<input type="hidden" name="parentMenuType" id="parentMenuType"/>
						<input type="hidden" name="accessType" id="accessType" value="1"/>
						<font color='red'>*</font>名称：
					</td>
					<td class="l-table-edit-td">
						<input type="text" name="menuName" id="menuName"  maxLength="20"/>
						<span id="menuNameTip"></span>
					</td>
				</tr>
				<tr height="50px;">
					<td align="right">URL：</td>
					<td class="l-table-edit-td"><input type="text" name="menuUrl" id="menuUrl" maxLength="150"/></td>
				</tr>
				<tr height="50px;">
					<td align="right"><font color='red'>*</font>类型：</td>
					<td class="l-table-edit-td">
						<select name="menuType" id="menuType"  >
							<option value="">请选择</option>
							<option value="1">供应链平台</option>
							<option value="2">供应商开放平台</option>
						 </select>
					</td>
				</tr>
				<tr height="50px;">
					<td align="right"><font color='red'>*</font>排序：</td>
					<td class="l-table-edit-td">
						<input type="text" name="menuSort" id="menuSort"  maxLength="5"/>
						<span id="menuSortTip"></span>
					</td>
				</tr>
				
				<tr height="50px;">
					<td align="right">备注：</td>
					<td class="l-table-edit-td">
						<input type="text" name="remark" id="remark" maxLength="30"/>
					 </td>
				</tr>
			</table>
			<br>
			 <div class="ytweb-form-btn">
				<input type="submit" value="增加" class="yt-form-btn-back"/>
				<input type="button" value="修改" class="yt-form-btn-back" onclick="modifyMenuNode();"/>
				<input type="button" value="删除" class="yt-form-btn-back" onclick="deleteMenuNode();"/>
				<input type="button" value="清空" class="yt-form-btn-back" onclick="clearFormValue();"/>
	         </div>
		</form>
    </div>
<script type="text/javascript">
$(function() {
	//validate
    $.metadata.setType("attr", "validate");
    var v = $("form").validate({
    	rules: {
    		"menuName": {required: true,rangelength:[2,20],username:true},
    		"menuSort": {required: true,rangelength:[1,5],positiveInteger:true}
    	},
    	messages: {
    		"menuName": {
    			required: "该字段不能为空",
    			rangelength: jQuery.validator.format("请输入{0}-{1}位字符")
    		},
    		"menuSort": {
    			required: "该字段不能为空",
    			rangelength: jQuery.validator.format("请输入{0}-{1}位数字")
    		}
    	},
        errorPlacement: function (lable, element)
        {
            if (element.hasClass("l-textarea"))
            {
            	lable.ligerHideTip();
                element.ligerTip({ content: lable.html(), target: element[0] }); 
            }
            else if (element.hasClass("l-text-field"))
            {
            	lable.ligerHideTip();
                element.parent().ligerTip({ content: lable.html(), target: element[0] });
            }
            else
            {
                lable.appendTo(element.parents("td:first").next("td"));
            }
        },        
        success: function (lable)
        {
            lable.ligerHideTip();
            lable.remove();
        },
        submitHandler:function()
        {
        	if ($('#parentMenuType').val() != $('#menuType').val()) {
        		window.parent.$.ligerDialog.warn('请选择正确的类型');
        		return false;
        	}
        	if ($('#id').val() == '') {
        		window.parent.$.ligerDialog.warn('请选择节点');
        		return false;
        	}
        	$('#parentId').val($('#id').val());
            $("form .l-text,.l-textarea").ligerHideTip();
            var options = {
            		type: 'POST',
            		success: function(data){
            			if(data == "success") {
            				var s =window.parent.$.ligerDialog.success("添加成功","提示",function () {
            					clearFormValue();
                				window.location.reload();
            	        	});
            	        	$(s.dialog.winbtns).remove();
            			} else {
            				window.parent.$.ligerDialog.error("添加失败");
            			}
            		}
            	}, $form1 = $("#resourceMgtForm");
            $form1.ajaxSubmit(options);
            return false;
        }
    });
	$("form").ligerForm();
});
</script>
</body>
</html>